<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 这是用数组遍历的 -->
        <!-- 用了v-for最好加一个key，每循环一次，这个key一定要是唯一的，你可以用时间或者你循环数据里面的唯一值 -->
       <h1 v-for="s in students" :key="s.name">{{s.name}}今年{{s.age}}</h1>

       <hr>

       <!-- 其实可以有多个形参 -->
       <h1 v-for="(s,index) in students" :key="index">{{s.name}}今年{{s.age}},他的序列号是{{index}}</h1>

       <hr>
       <h2>我们还可以使用对象来遍历</h2>

       <p v-for = '(m,p,index) in me' :key="index+999">
           值是{{m}},属性名是{{p}},索引是{{index}}
       </p>


       <h1>加入你想遍历5次，你也不需要什么对象，什么数组，你把写值的地方写成5就行</h1>
       <p v-for="n in 5">{{n}}</p>


    </div>
   
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
           students:[
               {
                   name:"张三",
                   age:'18'
               },
               {
                   name:'王麻子',
                   age:'86'
               }
           ],
           me:{
               name:'老刘',
               age:'6',
               work:'c4'
           }
        }
    })
</script>
</html>